import { WorldMap } from "@/assets/home/js/world_cn_en";
import * as echarts from 'echarts'
import world from '@/assets/home/js/world.json'
import { Empty } from "element-ui";
import Vue from "vue";

let vueConstructor = Vue.extend(Empty);




export const initMap = (chartData) => {
    // console.log(chartData);
    if (!chartData || chartData.length == 0) {
        const empty = new vueConstructor({
            el: document.createElement('div')
        });
        document.getElementById("geo_echarts").innerHTML = empty.$el.outerHTML
        return;
    }

    echarts.registerMap('world', { geoJSON: world })
    let allDatas = Array.from(new Set(Object.keys(WorldMap)));  //拿到地名
    let map = new Map();
    chartData.forEach(e => {
        map.set(e.country, e.count)
    })
    allDatas = allDatas.map(e => {
        return {
            name: e,
            value: map.get(e) || 0
        }
    })
    let option = {
        nameMap: allDatas,
        tooltip: {},
        // visualMap: {
        //   min: 1,
        //   max: this.countryAggs?.[0]?.doc_count || 0,
        //   text: ['High', 'Low'],
        //   realtime: false,
        //   calculable: true,
        //   inRange: {
        //     color: ['lightskyblue', 'yellow', 'orangered']
        //   }
        // },
        visualMap: {
            type: 'piecewise',
            min: 1,
            max: chartData?.[0]?.count || 0,
            showLabel: !0,
            text: ["高", "低"],
            pieces: [
                { min: 300, label: '>500' }, // 不指定 max，表示 max 为无限大（Infinity）。
                { min: 200, max: 300 },
                { min: 100, max: 200 },
                { min: 50, max: 100 },
                { min: 10, max: 50 },
                { min: 1, max: 10 }
            ],
            show: !0,
            color: ['#E0FFFF', '#BBE7F9', '#95CFF4', '#4B9EE8', '#006EDD', 'red'].reverse()
        },
        series: [
            {
                name: '获奖人数',
                type: 'map',
                map: 'world',
                itemStyle: {
                    normal: {
                        areaColor: '#fff',
                    }
                },
                data: allDatas
            }
        ]
    };
    let mychart = echarts.init(document.getElementById("geo_echarts"))
    mychart.setOption(option, true)
}



// export const initSubjectChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("subjectChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById('subjectChart'));
//     let option = {
//         color: ['#667dd8', '#9bcb77', '#f1c75d', '#de6767', '#85c0dd'],
//         title: {
//             text: '',
//             left: 'center',
//             top: 20,
//             show: false
//         },
//         tooltip: {
//             trigger: 'item'
//         },
//         series: [
//             {
//                 name: '人才学科分布',
//                 type: 'pie',
//                 radius: '50%',
//                 data: chartData.map(e => {
//                     return {
//                         value: e.doc_count,
//                         name: e.key
//                     }
//                 }),
//                 label: {
//                     formatter: '{b}:{c}人'
//                 },
//                 emphasis: {
//                     itemStyle: {
//                         shadowBlur: 10,
//                         shadowOffsetX: 0,
//                         shadowColor: 'rgba(0, 0, 0, 0.5)'
//                     }
//                 }
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initHonorChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("honorChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("honorChart"));
//     let option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'shadow'
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '5%',
//             bottom: '4%',
//             containLabel: true
//         },
//         yAxis: [{
//             type: 'value'
//         }],
//         xAxis: [{
//             type: 'category',
//             data: chartData.map(e => e.key).slice(0, 6),
//             axisLabel: {
//                 // show:false
//             }
//         }],
//         series: [
//             {
//                 name: "人才数量",
//                 type: "bar",
//                 data: chartData.map(e => e.doc_count).slice(0, 6),
//                 colorBy: 'data',
//                 label: {
//                     show: true,
//                     position: 'top'
//                 }
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initAwardChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("awardChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("awardChart"));
//     let option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'shadow'
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '5%',
//             bottom: '4%',
//             containLabel: true
//         },
//         yAxis: [{
//             type: 'value'
//         }],
//         xAxis: [{
//             type: 'category',
//             data: chartData.map(e => e.key).slice(0, 6),
//             axisLabel: {
//                 // show:false
//             }
//         }],
//         series: [
//             {
//                 name: "人才数量",
//                 type: "bar",
//                 data: chartData.map(e => e.doc_count).slice(0, 6),
//                 colorBy: 'data',
//                 label: {
//                     show: true,
//                     position: 'top'
//                 }
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initDomainChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("domainChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("domainChart"));
//     let option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'shadow'
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '5%',
//             bottom: '4%',
//             containLabel: true
//         },
//         yAxis: [{
//             type: 'value'
//         }],
//         xAxis: [{
//             type: 'category',
//             data: chartData.map(e => e.key).slice(0, 6),
//             axisLabel: {
//                 // show:false
//             }
//         }],
//         series: [
//             {
//                 name: "人才数量",
//                 type: "bar",
//                 data: chartData.map(e => e.doc_count).slice(0, 6),
//                 colorBy: 'data',
//                 label: {
//                     show: true,
//                     position: 'top'
//                 },
//                 barWidth: 30
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initTitleChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("titleChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("titleChart"));
//     let option = {
//         tooltip: {
//             trigger: 'item'
//         },
//         series: [
//             {
//                 name: '职称',
//                 type: 'pie',
//                 radius: ['40%', '70%'],
//                 avoidLabelOverlap: false,
//                 emphasis: {
//                     itemStyle: {
//                         shadowBlur: 10,
//                         shadowOffsetX: 0,
//                         shadowColor: 'rgba(0, 0, 0, 0.5)'
//                     }
//                 },
//                 data: chartData.map(e => {
//                     return {
//                         name: e.key,
//                         value: e.doc_count
//                     }
//                 })
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initSexChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("sexChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("sexChart"));
//     var female = ""
//     var male = ""

//     let maleValue = chartData.filter(e => e.key == '男')?.[0]?.doc_count || 0
//     let femaleValue = chartData.filter(e => e.key == '女')[0]?.doc_count || 0
//     let total = maleValue + femaleValue;
//     let malePercent = maleValue / total;
//     let femalePercent = femaleValue / total;
//     let option = {
//         grid: {
//             left: '20%',
//             right: '20%'
//         },
//         xAxis: {
//             type: 'value',
//             show: false
//         },
//         yAxis: [{
//             type: 'category',
//             inverse: true,
//             data: ['男'],
//             axisTick: {
//                 show: false
//             },
//             axisLine: {
//                 show: false
//             },
//             axisLabel: {
//                 show: false
//             }
//         },
//         {
//             type: 'category',
//             inverse: true,
//             data: ['女'],
//             axisTick: {
//                 show: false
//             },
//             axisLine: {
//                 show: false
//             },
//             axisLabel: {
//                 show: false
//             }
//         }
//         ],
//         series: [{
//             type: 'bar',
//             barWidth: 20,
//             data: [malePercent],
//             z: 20,
//             itemStyle: {
//                 normal: {
//                     barBorderRadius: 10,
//                     color: '#3b96fe'
//                 }
//             }
//         },
//         {
//             type: 'bar',
//             barWidth: 20,
//             data: [0],
//             barGap: '-100%',
//             itemStyle: {
//                 normal: {
//                     barBorderRadius: 10,
//                     color: 'rgba(0,0,0,0)'
//                 }
//             },
//             markPoint: {
//                 symbol: 'rect',
//                 // x:'0%',
//                 symbolSize: [45, 45],
//                 symbolOffset: [-35, 0],
//                 label: {
//                     color: 'rgba(0,0,0,0)',
//                     formatter: params => {
//                         return `{value|${(malePercent * 100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
//                     },
//                     rich: {
//                         value: {
//                             color: '#3b96fe',
//                             fontSize: 20,
//                             padding: [0, 0, 0, 150],
//                             fontWeight: 'bold'
//                         },
//                         name: {
//                             color: '#3b96fe',
//                             fontSize: 20,
//                             padding: [0, 0, 0, 150],
//                             fontWeight: 'bold'
//                         }
//                     }
//                 },
//                 data: [{
//                     name: '男',
//                     type: 'max',
//                     symbol: 'image://' + male
//                 }]
//             }
//         },
//         {
//             type: 'bar',
//             barWidth: 20,
//             data: [1],
//             barGap: '-100%',
//             itemStyle: {
//                 normal: {
//                     barBorderRadius: 10,
//                     color: '#fc6c5c'
//                 }
//             },
//             markPoint: {
//                 symbol: 'rect',
//                 // x:'0%',
//                 symbolSize: [45, 45],
//                 symbolOffset: [35, 0],
//                 label: {
//                     color: 'rgba(0,0,0,0)',
//                     formatter: params => {
//                         return `{value|${(femalePercent * 100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
//                     },
//                     rich: {
//                         value: {
//                             color: '#fc6c5c',
//                             fontSize: 20,
//                             padding: [0, 160, 0, 0],
//                             fontWeight: 'bold'
//                         },
//                         name: {
//                             color: '#fc6c5c',
//                             fontSize: 20,
//                             padding: [0, 160, 0, 40],
//                             fontWeight: 'bold'
//                         }
//                     }
//                 },
//                 data: [{
//                     name: '女',
//                     type: 'max',
//                     symbol: 'image://' + female
//                 }]
//             }
//         }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initAgeChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("ageChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById('ageChart'));
//     let option = {
//         color: ['#667dd8', '#9bcb77', '#f1c75d', '#de6767', '#85c0dd'],
//         title: {
//             text: '',
//             left: 'center',
//             top: 20,
//             show: false
//         },
//         tooltip: {
//             trigger: 'item'
//         },
//         series: [
//             {
//                 name: '人才学科分布',
//                 type: 'pie',
//                 radius: '50%',
//                 data: chartData.map(e => {
//                     return {
//                         value: e.doc_count,
//                         name: e.key
//                     }
//                 }),
//                 label: {
//                     formatter: '{b}:{c}人'
//                 },
//                 emphasis: {
//                     itemStyle: {
//                         shadowBlur: 10,
//                         shadowOffsetX: 0,
//                         shadowColor: 'rgba(0, 0, 0, 0.5)'
//                     }
//                 }
//             }
//         ]
//     };
//     myChart.setOption(option)
// }
// export const initCityChart = (chartData) => {
//     if (!chartData || chartData.length == 0) {
//         const empty = new vueConstructor({
//             el: document.createElement('div')
//         });
//         document.getElementById("cityChart").innerHTML = empty.$el.outerHTML
//         return;
//     }
//     let myChart = echarts.init(document.getElementById("cityChart"));
//     let option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'shadow'
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '5%',
//             bottom: '4%',
//             containLabel: true
//         },
//         yAxis: {
//             type: 'value'
//         },
//         xAxis: {
//             type: 'category',
//             data: chartData.map(e => e.key),
//             axisLabel: {
//                 // show:false
//                 interval: 1
//             }
//         },
//         series: [
//             {
//                 name: "人才数量",
//                 type: "bar",
//                 showBackground: true,
//                 data: chartData.map(e => e.doc_count),
//                 colorBy: 'data',
//                 label: {
//                     show: true,
//                     position: 'top'
//                 }
//             }
//         ]
//     };
//     myChart.setOption(option)
// }